<script setup>
import { reactive,ref,getCurrentInstance } from 'vue'
import { getUserWallet,getByTypeCode } from '../../http/api'
import titleTop from '../../components/topTitle/index.vue'

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const { proxy } = getCurrentInstance()
const { $t } = proxy;
// 用户信息对象
let userInfo = ref(undefined)
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了49')
    if(res.code === 200){
        userInfo.value.balance = res.result.balance
    }
}
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
}

let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
let textData = ref('')
// 获取页面文章内容
const getByTypeCodeFn = ()=>{
    let obj = {
        typeCode:"PROVABLE_FAIRNESS",
    }
    getByTypeCode(obj).then(res=>{
        console.log(res,'文章返回---')
        if(res.success){
            textData.value = res.result.content
        }
    })
}
getByTypeCodeFn()
</script>
<template>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
        <headNavigation :userInfo="userInfo"      @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark"   @loginEmit="loginEmit"></headNavigation>

        <div class="modelTop">
            <div class="nowEggPng">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }">{{$t('msg.message.profair')}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                    </div>
                </div>
                <img :src="getImageUrl('title.png')" alt="">
            </div>
        </div>
        <div style="display:flex;justify-content: center;width:100%;">
            <div class="textBox">
                <div class="textBoxS" v-html="textData" :style="{background:isDark?'#0F0F0F':'#fff',color:isDark?'#fff':'#000'}">
                </div>
            </div>
        </div>
       
    </div>
</template>
<style scoped>
.modelTop{
    padding-top: 20px;
}
.pbot48{
    padding-bottom: 48px;
}
.homeBody {
    overflow-x: hidden;
    max-width: 2560px;
    min-width:1200px;
    /* height: 100vh; */
    /* padding-bottom: 50px; */
    overflow: hidden;
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    padding-bottom: 50px;
    margin: 0 auto;
}

.textBox {
    max-width: 2560px;
    display: flex;
    justify-content: center;
    margin: 0 240px;
}

.textBoxS {
    background: #0F0F0F;
    max-width: 100%;
    padding: 44px;
    color: #fff;
    font-size: 24px;
    padding-bottom: 164px;
}
.textBoxS  >>> .pre{
    word-break: break-all !important;
    display: block !important;
    width: 95% !important;
}
.nowEggPng{
    position: relative;
    /* width: 356px; */
    display: flex;
    /* width: 100%; */
    margin-left: 240px;
    flex-direction: column;
    font-size: 44px;
}
.nowEggPng img {
    width:97px;
}
.jiantoubox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jiantou{
    margin-left: 15px;
    width: 100px !important;
}
.realTime{
    font-size: 15px;
    padding-top: 2px;
    padding-left: 2px;
    color: #fff !important;
}
.nowEggPngDiv{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 76px;
    font-size: 40px;
    top: 14px;
}
.title{
    font-size: 28px;padding-bottom: 31px;
}
.detail{
    font-size: 20px;
}
@media screen and (max-width:1600px) {
.nowEggPng{
    margin-left: 60px;
}
.textBox{
    margin: 0 60px;
    width: 89%;
}
}
</style>